import './App.css';

import React, { Component } from 'react'
import Swiper from './components/Swiper/Swiper'
import Navigation from './components/Navigation/Navigation'
import GoodsCard from './components/GoodsCard/GoodsCard'
import ShoppingCart from './components/ShoppingCart/ShoppingCart'
import { Row, Col, Divider} from 'antd';
const bases = require('./Json/bases.json')

export default class App extends Component {
  constructor(props) {
    super(props)
  
    this.state = {
      imgs:['http://react-final-work.test.upcdn.net/01.png','http://react-final-work.test.upcdn.net/02.png','http://react-final-work.test.upcdn.net/03.png'],
      bases:bases,
      index_sub: 0, //一级导航数据索引
      index: 0, //二级导航数据索引
      shopping: new Map() //购物车数据存储
    }
  }

  /**
   * 处理左边导航栏的回调函数,用来切换数据源
   * @param {*} index_sub 
   * @param {*} index 
   */
  _navigation_callBack=(index_sub,index)=>{
    this.setState({index_sub,index})
  }

  /**
   * 处理加入购物车的数据
   * @param {*} shop 
   */
  _submit=shop=>{
    let shopping =this.state.shopping
    if(this.state.shopping.has(shop)){
      let count=Number.parseInt(shopping.get(shop))+Number.parseInt(shop.count) 
      shopping.set(shop,count)
      }else{
        shopping.set(shop,shop.count)
      }
    this.setState({shopping})
  }

  /**
   * 控制购物车的购买数量减法
   * @param {*} shop 
   */
  _sub=shop=>{
    let shopping =this.state.shopping
    let count=shopping.get(shop)
    if(count > 1){
    shopping.set(shop,--count)
    }
    this.setState({shopping})
  }

  /**
   * 控制购物车的购买数量加法
   * @param {*} shop 
   */
  _add=shop=>{
    let shopping =this.state.shopping
    let count= shopping.get(shop)
    if(count < 99){
    shopping.set(shop,++count)
    }
    this.setState({shopping})
  }

  /**
   * 控制购物车的删除
   * @param {*} shop 
   */
  _delete=shop=>{
    let shopping =this.state.shopping
    shopping.delete(shop)
    this.setState({shopping})
  }

  render() {
    return (
      <div className="app">
        <div className="header">
          <Swiper imgs={this.state.imgs}/>
        </div>
        <div className="content">
          <Row>
            <Col xs={0} sm={0} md={0} lg={2} xl={2}/>
            <Col xs={24} sm={24} md={24} lg={20} xl={20}>
            <div className="content-swaper">
              <Col xs={0} sm={0} md={0} lg={0} xl={4}><div className="left-sider"><Navigation bases={this.state.bases} _navigation_callBack={this._navigation_callBack}/></div></Col>
              <Col xs={24} sm={24} md={17} lg={17} xl={15}><div className="content-card"><GoodsCard _submit={this._submit} base={this.state.bases[this.state.index_sub].items[this.state.index].itemss}/></div></Col>
              <Col xs={0} sm={0} md={7} lg={7} xl={5}><div className="right-sider"><ShoppingCart shopping={this.state.shopping} _sub={this._sub} _add={this._add} _delete={this._delete}/></div></Col>
            </div>
            </Col>
            <Col xs={0} sm={0} md={0} lg={2} xl={2}/>
          </Row>
        </div>
        <Divider/>
        <div className="footer">
          <div className="footer-text">
            <div> 法律条款 &nbsp;&nbsp;|&nbsp;&nbsp; 隐私条款 &nbsp;&nbsp;|&nbsp;&nbsp; 联系我们 &nbsp;&nbsp;|&nbsp;&nbsp; 加入我们 &nbsp;&nbsp;|&nbsp;&nbsp; 网站运营者信息 &nbsp;&nbsp;|</div>
            <div>版权所有 <a href="https://www.fireboom.cn">fireboom.cn</a> (中国) 投资有限公司 京ICP备20017183号-1 </div>
          </div>
        </div>


      </div>
    )
  }
}
